<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function() {
			//点击按钮后，id为"pps"中的所有的p标签都变色
				var my_btn = document.getElementById("btn");

				my_btn.onclick = function() {
					//先通过Id得到一个大范围(div)，再调用getElementsByTagName()来获取要操作的对象 
					var my_p = document.getElementById("pps").getElementsByTagName("p");
					console.log(my_p);

					for(var i = 0; i <= my_p.length-1; i++) {
							my_p[i].style.background = "yellow";
					}
					//让p5变为红色             p5在pps中排第二，下标为1
					my_p[1].style.background = "red";
				}
			}
		</script>
	</head>

	<body>
		<input type="button" id="btn" value="点击我" />
		<p>p1</p>
		<p>p2</p>
		<p>p3</p>
		<div id="pps">
			<p>p4</p>
			<div>
				<p>p5</p>
			</div>
			<p>p6</p>
		</div>
		</table>
	</body>

</html>